<template>
	<div class="tool-title-box">
		<h3>按钮设置</h3>
		<div class="operation-box">
			<div class="item-box">
				<div class="title">按钮图标</div>
				<div class="block">
					<IconSelector class="w100" v-model="activeComponent.data.icon" type="awe" clearable  placeholder="请选择"></IconSelector>
				</div>
			</div>
			<div class="item-box">
				<div class="title">按钮名称</div>
				<div class="modify-box">
					<el-input class="w100" placeholder="请输入按钮名称" clearable v-model="activeComponent.data.title"></el-input>
				</div>
			</div>
			<div class="item-box">
				<div class="title">显示位置</div>
				<div class="Info">居{{activeComponent.data.align == 'right' ? '右' : activeComponent.data.align == 'center' ? '中' : '左'}}</div>
				<div class="modify-box">
					<span class="iconfont" :class="{buttonActive: activeComponent.data.align === 'left'}" 
						@click="activeComponent.data.align = 'left'">
						<i class="fa fa-align-left" aria-hidden="true"></i>
					</span>
					<span class="iconfont" :class="{buttonActive: activeComponent.data.align === 'center'}"
						@click="activeComponent.data.align = 'center'">
						<i class="fa fa-align-center" aria-hidden="true"></i>
					</span>
					<span class="iconfont" :class="{buttonActive: activeComponent.data.align === 'right'}"
						@click="activeComponent.data.align = 'right'">
						<i class="fa fa-align-right" aria-hidden="true"></i>
					</span>
				</div>
			</div>
			<div class="item-box">
				<div class="title">按钮大小</div>
				<div class="modify-box">
					<el-select v-model="activeComponent.data.size" placeholder="请选择" style="width: 100px;">
						<el-option label="large" value="large"></el-option>
						<el-option label="medium" value="medium"></el-option>
						<el-option label="small" value="small"></el-option>
						<el-option label="mini" value="mini"></el-option>
					</el-select>
				</div>
			</div>
			<div class="item-box">
				<div class="title">按钮宽度</div>
				<div class="modify-box">
					<el-input-number class="mr10" placeholder="按钮宽度" clearable v-model="activeComponent.data.width"></el-input-number>
					<el-select v-model="activeComponent.data.widthUnit" placeholder="宽度单位" style="width: 100px;">
						<el-option label="%" value="%"></el-option>
						<el-option label="px" value="px"></el-option>
						<el-option label="pt" value="pt"></el-option>
						<el-option label="em" value="em"></el-option>
						<el-option label="rem" value="rem"></el-option>
						<el-option label="cm" value="cm"></el-option>
						<el-option label="mm" value="mm"></el-option>
						<el-option label="in" value="in"></el-option>
					</el-select>
				</div>
			</div>
			<!-- <div class="item-box">
				<div class="title">按钮属性</div>
				<div class="modify-box">
					<el-select v-model="activeComponent.data.nativeType" placeholder="请选择" style="width: 100px;">
						<el-option label="button" value="button"></el-option>
						<el-option label="submit" value="submit"></el-option>
						<el-option label="reset" value="reset"></el-option>
					</el-select>
				</div>
			</div> -->
			<div class="item-box">
				<div class="title">按钮事件</div>
				<div class="modify-box">
					<el-select v-model="activeComponent.data.eventType" clearable placeholder="请选择" style="width: 100px;">
						<el-option label="表单提交" value="submit"></el-option>
						<el-option label="表单重置" value="reset"></el-option>
						<el-option label="链接跳转" value="link"></el-option>
						<el-option label="弹窗提示" value="dialog"></el-option>
						<el-option label="消息提示" value="message"></el-option>
					</el-select>
				</div>
			</div>
			<div class="item-box">
				<div class="title">按钮类型</div>
				<div class="modify-box">
					<el-select v-model="activeComponent.data.type" clearable placeholder="请选择" style="width: 100px;">
						<el-option label="default" value=""></el-option>
						<el-option label="primary" value="primary"></el-option>
						<el-option label="success" value="success"></el-option>
						<el-option label="warning" value="warning"></el-option>
						<el-option label="danger" value="danger"></el-option>
						<el-option label="info" value="info"></el-option>
					</el-select>
				</div>
			</div>
			<!-- <div class="item-box">
				<div class="title">按钮颜色</div>
				<div class="Info">{{activeComponent.data.color}}</div>
				<div class="modify-box">
					<div class="colorBox">
						<span @click="activeComponent.data.color = '#FFFFFF'">重置</span>
						<div class="block">
							<el-color-picker v-model="activeComponent.data.color"></el-color-picker>
						</div>
					</div>
				</div>
			</div> -->
			<div class="item-box">
				<div class="title">朴素按钮</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.plain"
						size="small"
						active-text="是"
						inactive-text="否"
					/>
				</div>
			</div>
			<div class="item-box">
				<div class="title">圆角按钮</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.round"
						size="small"
						active-text="是"
						inactive-text="否"
					/>
				</div>
			</div>
			<div class="item-box">
				<div class="title">圆形按钮</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.circle"
						size="small"
						active-text="是"
						inactive-text="否"
					/>
				</div>
			</div>
			<div class="item-box">
				<div class="title">是否禁用</div>
				<div class="modify-box">
					<el-switch v-model="activeComponent.data.disabled"
						size="small"
						active-text="是"
						inactive-text="否"
					/>
				</div>
			</div>
		</div>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive, computed } from 'vue';
	
	import { useStore } from '/@/store/index';
	import IconSelector from '/@/components/iconSelector/index.vue';
	
	export default {
		name: 'text-tool',
		components: {
			IconSelector
		},
		setup() {
			const store = useStore();
			const state = reactive({
				
			})
			state.terminal = computed(() => store.state.decorator.terminal);
			state.activeComponent = computed(() => store.state.decorator.activeComponent);
			return {
				...toRefs(state),
			};
		},
	}
</script>

<style lang="scss" scoped>
@import './scss/index.scss';
</style>